<template>
  <a-alert v-if="showTip"> 请上传首页照片或首尾两页合照。请保证图片内容清晰、无反光、无折痕、背景无杂物。 </a-alert>
  <div class="upload-wrapper">
    <page-form-row>
      <page-form-item style="margin-bottom: 0">
        <template #label>
          <div class="label-wrapper">
            <div class="label-text">上传文件</div>
            <div class="label-subtext">（仅支持PDF、JPG、PNG格式，最大文件不超过20mb）</div>
          </div>
        </template>
        <upload-attach v-model="item.policyImgFileId" :accept="['PDF', 'JPG', 'PNG']" />
      </page-form-item>
    </page-form-row>
    <a-divider />
    <page-form-row>
      <page-form-item label="保险单关联门店" v-bind="getInsureAttrs('siteId', '请选择保险单关联门店')">
        <remote-select
          v-model="item.siteId"
          :initStr="item.siteId ? item.siteName : ''"
          :popupContainer="popupContainer"
          placeholder="请选择"
          type="site_listBystaff"
        />
      </page-form-item>
      <page-form-item
        label-component="div"
        style="position: relative"
        label="保险公司"
        v-bind="getInsureAttrs('insureCompany', '请选择保险公司')"
      >
        <template #label-extra>
          <!-- 新增供应商 -->
          <i-add-supplier typeText="保险" supplierType="7" @addOk="addOk" />
        </template>
        <remote-select
          v-model="item.insureCompany"
          :params="{
            id: item.insureCompany,
          }"
          placeholder="请选择"
          :popupContainer="popupContainer"
          type="supplier_bx"
        />
      </page-form-item>
      <page-form-item label="实际保单号">
        <i-input v-model="item.insureNo" :max-length="30" />
      </page-form-item>
      <page-form-item label="有效期" v-bind="getInsureAttrs('dateRange', '请选择有效期')">
        <slot>
          <i-range-picker v-model="item.dateRange" class="w-full" @change="(val) => changeDateFn(val, item)" />
        </slot>
      </page-form-item>
      <!-- <page-form-item label="保额">
        <i-input-number v-model="item.insuredSum" />
      </page-form-item> -->
      <page-form-item label="保险费">
        <i-input-number v-model="item.insureAmt" />
      </page-form-item>
      <page-form-item label="被保险人">
        <i-input v-model="item.insuredPorsen" :max-length="50" />
      </page-form-item>
      <page-form-item label="被保险人证件号">
        <i-input v-model="item.insuredPorsenCard" :max-length="30" />
      </page-form-item>
      <page-form-item label="业务员姓名">
        <i-input v-model="item.experiencedPorsen" :max-length="20" />
      </page-form-item>
      <page-form-item label="业务员电话" :field="`${fieldPrefix}experiencedPhone`" :rules="experiencedPhoneValidator">
        <i-input v-model="item.experiencedPhone" :max-length="11" />
      </page-form-item>
    </page-form-row>
  </div>
</template>

<!-- 交强险 -->
<script setup name="CarManageFormCompulsoryItem">
  import { isMobile } from '@/utils/validate.js'
  import { useVModel } from '@vueuse/core'
  const props = defineProps({
    showTip: {
      type: Boolean,
      default: true,
    },
    operateType: {
      type: String,
      default: 'addCar', // addCar | addInsure | editInsure
    },
    info: Object,
    fieldPrefix: {
      type: String,
      default: '',
    },
    popupContainer: [String, Object],
  })
  const emit = defineEmits(['update:info'])
  const item = useVModel(props, 'info', emit)

  // 添加供应商成功
  const addOk = (id) => {
    item.value.insureCompany = id
  }

  const validatorPhone = (value, callback) => {
    if (value && !isMobile(value)) {
      callback('支持输入11位数字')
    }
    callback()
  }
  const experiencedPhoneValidator = { required: false, validator: validatorPhone }
  const getValidatorFn = (propStr, msg) => {
    // dateRange 日期做校验
    return propStr == 'insureCompany'
      ? undefined
      : (value, callback) => {
          if (!value) {
            callback(msg)
          } else {
            if (value.length > 0) {
              // 续保时默认有开始时间，此时 value[1] 为 undefined
              if (!value[0] || !value[1]) {
                callback(msg)
              }
            }
          }
          callback()
        }
  }
  /**
   * 新增保险、编辑保险时，为必填项
   * @param propStr prop 字段
   * @param msg 提示语
   */
  const getInsureAttrs = (propStr, msg) => {
    return ['addInsure', 'editInsure'].includes(props.operateType)
      ? {
          field: `${props.fieldPrefix}${propStr}`,
          required: true,
          rules: { required: true, message: msg, validator: getValidatorFn(propStr, msg) },
        }
      : {}
  }
  // 日期修改
  const changeDateFn = (value = [], item) => {
    item.beginDate = value[0]
    item.endDate = value[1]
  }
</script>

<style lang="less" scoped>
  .upload-wrapper {
    padding: 20px 0 0;
  }
  .label-wrapper {
    text-wrap: nowrap;
    display: flex;
    margin-bottom: 3px;
    .label-subtext {
      font-size: 12px;
      color: #86909c;
      line-height: 22px;
    }
  }
</style>
